<template>
  <div class="infrastructure-introduce-container page-common-layout">
    <div class="page-title">基建板块介绍</div>
    <div class="table-container">
      <a-table
        ref="table"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        style="width:100%;"
      >
        <template slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </template>
        <template slot="operation" slot-scope="_, record">
          <a-button type="link" @click="editor(record)">
            编辑
          </a-button>
          <!-- <a-button
            type="link"
            @click="handleConfig(record)"
            v-if="record.orgEnterpriseType != 'EnterpriseType.01'"
          >
            首页配置
          </a-button> -->
        </template>
      </a-table>
    </div>
    <div class="pager-container" v-if="false">
      <a-pagination
        show-quick-jumper
        :default-current="2"
        :total="total"
        :show-total="(total) => `共 ${total} 条`"
      />
    </div>
    <!-- 编辑弹窗-->
    <edit-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :url="url"
      requestMethod="post"
      :tableDataType="tableDataType"
      @cancel="handleCancel()"
      @ok="handleOk()"
    />
  </div>
</template>
<script>
import editForm from "@/pages/form/formPreview/edit.vue";
import { axios } from "@/utils/request";
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      url: {
        update: "/form/formDatabase/formUpdate",
      },
      tableDataType: "",
      //表格列配置
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          width: "80px",
          align: "center",
          scopedSlots: { customRender: "index" },
        },
        {
          title: "名称",
          dataIndex: "orgName",
          key: "orgName",
        },
        {
          title: "类型",
          dataIndex: "orgEnterpriseTypeDesc",
          key: "orgEnterpriseTypeDesc",
        },
        {
          title: "编辑人",
          dataIndex: "modifier",
          key: "modifier",
        },
        {
          title: "编辑时间",
          dataIndex: "modifyTime",
          key: "modifyTime",
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
          width: 70,
        },
      ],
      total: 0,
      tableData: [],
      tableUuid: "CF2C40131D1D4F46B8BD38C24FA08730",
    };
  },
  components: {
    editForm,
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    async handleConfig(record = {}) {
      this.tableUuid = "A0EF9F0DFB0F4E4EAD0583602434E88C";
      let { uuid } = record;
      this.visible = true;
      let formJsonData = await this.loadDataJson();
      this.$refs.createModal.title = "首页配置";
      this.$refs.createModal.loading = true;
      this.$post("/form/formDatabase/formGetDetail", {
        uuid: uuid,
        formUuid: this.tableUuid,
      }).then((res) => {
        this.$refs.createModal.loadData(
          this.tableUuid,
          "edit",
          formJsonData,
          res
        );
        this.getData();
      });
    },

    //查询列表数据
    getData() {
      axios
        .post(
          "/mdata/organization/getEnterpriseCompanyList",
          {
            body: {},
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let { data } = res;
          this.tableData = data;
          this.total = data.length;
        })
        .catch((_) => {
          this.total = 0;
          this.tableData = [];
        });
    },

    //编辑
    async editor(record = {}) {
      let { orgEnterpriseType, uuid } = record;
      if (orgEnterpriseType == "EnterpriseType.01") {
        this.tableUuid = "444F39AA38E14D46A01602E066FFFBB5";
      } else {
        this.tableUuid =
          process.env.VUE_APP_API_BASE_URL == "http://10.107.32.158:20004"
            ? "B5136A52289A45DB941CE7D6512758F0"
            : "CF2C40131D1D4F46B8BD38C24FA08730";
      }
      this.visible = true;
      let formJsonData = await this.loadDataJson();
      this.$refs.createModal.title = "编辑";
      this.$refs.createModal.loading = true;
      this.$post("/form/formDatabase/formGetDetail", {
        uuid: uuid,
        formUuid: this.tableUuid,
      }).then((res) => {
        this.$refs.createModal.loadData(
          this.tableUuid,
          "edit",
          formJsonData,
          res
        );
        this.getData();
      });
    },

    loadDataJson() {
      return new Promise((reslove) => {
        this.$post("/form/formBasicConfigure/getDetailByUuid", {
          uuid: this.tableUuid,
        })
          .then((res) => {
            this.tableDataType = res.formDatabase?.type || "";
            reslove(res.formDesign.designJson);
          })
          .catch((_) => {
            reslove({});
          });
      });
    },

    //关闭弹窗
    handleCancel() {
      this.visible = false;
    },

    handleOk() {
      this.visible = false;
    },
  },
};
</script>
<style lang="less" scoped>
.infrastructure-introduce-container {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 0 16px;
  .page-title {
    color: #333333;
    font-size: 16px;
    padding: 20px 0;
    font-weight: bold;
  }
  .table-container {
    flex: 1;
    /deep/.ant-table {
      .ant-table-thead {
        tr {
          th {
            padding: 12px 16px;
          }
        }
      }
      .ant-table-tbody {
        tr {
          td {
            padding: 8px 16px;
          }
        }
      }
    }
  }
  .pager-container {
    height: 46px;
    flex-shrink: 0;
    border-top: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
  }
}
</style>
